<template>
	<view class="enjoy-burst">
		<!-- 爆爆赏 -->

		<!-- 导航栏 -->
		<view class="enjoy-lottery-nav" :class="{'black-bg':navBlackBg}"
			:style="{'height':navBottom+'px','opacity':navOpacity}">
			<view class="content" :style="{'width':navWidth+'px','top':navTop+'px;','height':navHeight+'px'}">
				<view class="left-back" @click="goBack">
					<uni-icons type="back" color="#fff"></uni-icons>
				</view>
				<view class="title">
					【预售】爆爆赏商品名称商品名称
				</view>
			</view>
		</view>

		<!-- 顶部图片 -->
		<view class="enjoy-lottery-top">
			<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="image" />

			<!-- 左侧弹幕 -->
			<view class="left-box">
				<!-- 单个弹幕 -->
				<view class="barrage-item" :style="{'animation-delay':'.5s'}">
					<!-- 用户头像 -->
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="barrage-item-pic" />
					<!-- 用户名称 -->
					<text class="barrage-item-name">q***是</text>
					<!-- 提示文本 -->
					<text>获得了</text>
					<!-- 赏别 -->
					<text class="barrage-item-type"
						:class="{'color-red':true,'color-orange':false,'color-purple':false}">A赏</text>
					<!-- 奖品名称 -->
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode=""
						class="barrage-item-award" />
				</view>
				<!-- 单个弹幕 -->
				<view class="barrage-item" :style="{'animation-delay':'2s'}">
					<!-- 用户头像 -->
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="barrage-item-pic" />
					<!-- 用户名称 -->
					<text class="barrage-item-name">但***t</text>
					<!-- 提示文本 -->
					<text>获得了</text>
					<!-- 赏别 -->
					<text class="barrage-item-type"
						:class="{'color-red':false,'color-orange':true,'color-purple':false}">B赏</text>
					<!-- 奖品名称 -->
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode=""
						class="barrage-item-award" />
				</view>
				<!-- 单个弹幕 -->
				<view class="barrage-item" :style="{'animation-delay':'3.5s'}">
					<!-- 用户头像 -->
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="barrage-item-pic" />
					<!-- 用户名称 -->
					<text class="barrage-item-name">d***s</text>
					<!-- 提示文本 -->
					<text>获得了</text>
					<!-- 赏别 -->
					<text class="barrage-item-type"
						:class="{'color-red':false,'color-orange':false,'color-purple':true}">C赏</text>
					<!-- 奖品名称 -->
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode=""
						class="barrage-item-award" />
				</view>
			</view>

			<!-- 右侧盒子 -->
			<view class="right-box">
				<!-- 音效 -->
				<image :src="imageUrl('sound-effect-icon.png')" mode="" class="sound-effect-icon"
					:class="{'pause':isPaused}" @click="pausedAnimation" />

				<!-- 购买说明 -->
				<view class="right-more" @click="openRules">
					<image :src="imageUrl('enjoy-lottery-more.png')" mode="" class="image-bg" />
					<view class="content">
						<text style="margin-right: 10rpx;">购买说明</text>
						<u-icon name="question-circle" color="#fff" size="22rpx"></u-icon>
					</view>
				</view>
				<!-- 我的背包 -->
				<view class="right-more">
					<image :src="imageUrl('enjoy-lottery-more.png')" mode="" class="image-bg" />
					<view class="content">
						<text style="margin-right: 10rpx;">我的背包</text>
						<u-icon name="gift" color="#fff" size="22rpx"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部列表 -->
		<view class="enjoy-lottery-bottom">
			<!-- 底部折线 -->
			<image :src="imageUrl('enjoy-lottery-line.png')" mode="" class="line-pic" data-text="00:00" />

			<!-- 吸顶 -->
			<view class="check-change" :style="{'top':navHeight+navTop+'px'}">
				<!-- <view class="check-change-nav active" data-text="奖品一览">
					奖品一览
				</view>
				<view class="check-change-nav">
					中赏记录
				</view>
				<view class="check-change-nav">
					抽赏记录
				</view> -->
				<view class="check-change-nav" :class="{'active':chooseIndex===index}" :data-text="item"
					v-for="(item,index) in checkNav" :key="index" @click="changeIndex(index)">
					{{item}}
				</view>
			</view>

			<!-- 奖品一览 -->
			<view class="award-list" v-if="chooseIndex===0">
				<view class="award-item">
					<view class="award-item-top">
						<text class="class-type" :class="{'red':true}" data-text="至尊款">至尊款</text>
						<text>中奖概率：0.01%</text>
					</view>
					<scroll-view scroll-x="true" class="award-item-bottom">
						<view class="" style="display: flex;">

							<view class="one-record" v-for="item in 8">
								<image src="../../static/images/boom/boom-detail/award-doll.png" mode=""
									class="one-record-pic" />
								<view class="one-record-tip">
									<view class="one-record-name">
										商品名称商品名称商品名称商品名称商品名称商品名称
									</view>
									<view>
										参考价：¥699
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

				<view class="award-item">
					<view class="award-item-top">
						<text class="class-type" :class="{'orange':true}" data-text="稀有款">稀有款</text>
						<text>中奖概率：0.01%</text>
					</view>
					<scroll-view scroll-x="true" class="award-item-bottom">
						<view class="" style="display: flex;">

							<view class="one-record" v-for="item in 8">
								<image src="../../static/images/boom/boom-detail/award-doll.png" mode=""
									class="one-record-pic" />
								<view class="one-record-tip">
									<view class="one-record-name">
										商品名称商品名称商品名称商品名称商品名称商品名称
									</view>
									<view>
										参考价：¥699
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

				<view class="award-item">
					<view class="award-item-top">
						<text class="class-type" :class="{'purple':true}" data-text="隐藏款">隐藏款</text>
						<text>中奖概率：0.01%</text>
					</view>
					<scroll-view scroll-x="true" class="award-item-bottom">
						<view class="" style="display: flex;">

							<view class="one-record" v-for="item in 8">
								<image src="../../static/images/boom/boom-detail/award-doll.png" mode=""
									class="one-record-pic" />
								<view class="one-record-tip">
									<view class="one-record-name">
										商品名称商品名称商品名称商品名称商品名称商品名称
									</view>
									<view>
										参考价：¥699
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

				<view class="award-item">
					<view class="award-item-top">
						<text class="class-type" :class="{'blue':true}" data-text="普通款">普通款</text>
						<text>中奖概率：0.01%</text>
					</view>
					<scroll-view scroll-x="true" class="award-item-bottom">
						<view class="" style="display: flex;">

							<view class="one-record" v-for="item in 8">
								<image src="../../static/images/boom/boom-detail/award-doll.png" mode=""
									class="one-record-pic" />
								<view class="one-record-tip">
									<view class="one-record-name">
										商品名称商品名称商品名称商品名称商品名称商品名称
									</view>
									<view>
										参考价：¥699
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

			</view>

			<!-- 中赏记录 -->
			<view class="get-award" v-else-if="chooseIndex===1">
				<view class="get-award-card">
					<view class="top">
						<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="pic" />
						<view class="top-content">
							<view class="">
								<text class="class-type" :class="{'red':true}" data-text="至尊赏">至尊赏</text>
								<text>中奖概率：0.01%</text>
							</view>
							<view class="">
								距离上次中赏已抽 <text style="color: #FF7803;font-size: 40rpx;">13</text> 发
							</view>
						</view>
						<!-- 火花 -->
						<image :src="imageUrl('burst-fire.png')" mode="" class="burst-fire" />
					</view>
					<view class="bottom">
						<text>微信户昵称用 丨 2022-12-07 13:53:30</text>
						<view class="open-btn" @click="clickRest">
							展开
							<view class="down-arrow">
								<uni-icons type="bottom" color="#fff" size="24rpx" class="icon"></uni-icons>
								<uni-icons type="bottom" color="#fff" size="24rpx" class="icon"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<view class="get-award-card">
					<view class="top">
						<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="pic" />
						<view class="top-content">
							<view class="">
								<text class="class-type" :class="{'orange':true}" data-text="至尊赏">至尊赏</text>
								<text>中奖概率：0.01%</text>
							</view>
							<view class="">
								距离上次中赏已抽 <text style="color: #FF7803;font-size: 40rpx;">13</text> 发
							</view>
						</view>
					</view>
					<view class="bottom">
						<text>微信户昵称用 丨 2022-12-07 13:53:30</text>
						<view class="open-btn" @click="clickRest">
							展开
							<view class="down-arrow">
								<uni-icons type="bottom" color="#fff" size="24rpx" class="icon"></uni-icons>
								<uni-icons type="bottom" color="#fff" size="24rpx" class="icon"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<view class="get-award-card">
					<view class="top">
						<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="pic" />
						<view class="top-content">
							<view class="">
								<text class="class-type" :class="{'purple':true}" data-text="至尊赏">至尊赏</text>
								<text>中奖概率：0.01%</text>
							</view>
							<view class="">
								距离上次中赏已抽 <text style="color: #FF7803;font-size: 40rpx;">13</text> 发
							</view>
						</view>
					</view>
					<view class="bottom">
						<text>微信户昵称用 丨 2022-12-07 13:53:30</text>
						<view class="open-btn" @click="clickRest">
							展开
							<view class="down-arrow">
								<uni-icons type="bottom" color="#fff" size="24rpx" class="icon"></uni-icons>
								<uni-icons type="bottom" color="#fff" size="24rpx" class="icon"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<view class="get-award-card">
					<view class="top">
						<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="pic" />
						<view class="top-content">
							<view class="">
								<text class="class-type" :class="{'blue':true}" data-text="至尊赏">至尊赏</text>
								<text>中奖概率：0.01%</text>
							</view>
							<view class="">
								距离上次中赏已抽 <text style="color: #FF7803;font-size: 40rpx;">13</text> 发
							</view>
						</view>
					</view>
					<view class="bottom">
						<text>微信户昵称用 丨 2022-12-07 13:53:30</text>
						<view class="open-btn" @click="clickRest">
							展开
							<view class="down-arrow">
								<uni-icons type="bottom" color="#fff" size="24rpx" class="icon"></uni-icons>
								<uni-icons type="bottom" color="#fff" size="24rpx" class="icon"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 抽赏记录 -->
			<view class="get-record" v-else>
				<!-- 单条抽赏记录 -->
				<view class="get-record-item">
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="user-pic" />
					<view class="right">
						<view class="line-box">
							<text class="fontSize24">速溶沙漠用户</text>
							<text class="class-type" :class="{'red':true}" data-text="至尊赏">至尊赏</text>
						</view>
						<view class="line-box">
							<text>2022-12-07 13:53:30</text>
							<text class="fontSize24" style="text-align: right;">商品名称商品名称商品名称商品名称商品名称商品名称</text>
						</view>
					</view>
				</view>
				<!-- 单条抽赏记录 -->
				<view class="get-record-item">
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="user-pic" />
					<view class="right">
						<view class="line-box">
							<text class="fontSize24">速溶沙漠用户</text>
							<text class="class-type" :class="{'orange':true}" data-text="至尊赏">至尊赏</text>
						</view>
						<view class="line-box">
							<text>2022-12-07 13:53:30</text>
							<text class="fontSize24" style="text-align: right;">商品名称商品名称</text>
						</view>
					</view>
				</view>
				<!-- 单条抽赏记录 -->
				<view class="get-record-item">
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="user-pic" />
					<view class="right">
						<view class="line-box">
							<text class="fontSize24">速溶沙漠用户</text>
							<text class="class-type" :class="{'purple':true}" data-text="至尊赏">至尊赏</text>
						</view>
						<view class="line-box">
							<text>2022-12-07 13:53:30</text>
							<text class="fontSize24" style="text-align: right;">商品名称商品名称</text>
						</view>
					</view>
				</view>
				<!-- 单条抽赏记录 -->
				<view class="get-record-item">
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="user-pic" />
					<view class="right">
						<view class="line-box">
							<text class="fontSize24">速溶沙漠用户</text>
							<text class="class-type" :class="{'blue':true}" data-text="至尊赏">至尊赏</text>
						</view>
						<view class="line-box">
							<text>2022-12-07 13:53:30</text>
							<text class="fontSize24" style="text-align: right;">商品名称商品名称</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 解决底部脱标 -->
			<view style="height: 150rpx"></view>
		</view>

		<!-- 狂抽按钮 -->
		<view class="fast-lottery">
			<image :src="imageUrl('fast-lottery-btn.png')" mode="" class="fast-lottery-btn" data-text="狂抽" />
		</view>

		<!-- 购买说明弹出层 -->
		<u-popup :show="showRules" mode="center" bgColor="transparent" :safeAreaInsetBottom="false" @close="closeRules">
			<view class="rule-popup" data-text="购买说明">
				<image :src="imageUrl('enjoy-rule-popup.png')" mode="" class="enjoy-rule-popup" />
				<scroll-view scroll-y="true" class="popup-text">
					正文文案内容规则正文文案内容规则
					正文文案内容规则正文文案内容规则正文
					文案内容规则正文文案内容规则正文文案
					内容规则正文文案内容规则正文文案内容
					规则正文文案内容 正文文案内容规则正文文案内容规则
					正文文案内容规则正文文案内容规则正文
					文案内容规则正文文案内容规则正文文案
					内容规则正文文案内容规则正文文案内容
					规则正文文案内容 正文文案内容规则正文文案内容规则
					正文文案内容规则正文文案内容规则正文
					文案内容规则正文文案内容规则正文文案
					内容规则正文文案内容规则正文文案内容
					规则正文文案内容 正文文案内容规则正文文案内容规则
					正文文案内容规则正文文案内容规则正文
					文案内容规则正文文案内容规则正文文案
					内容规则正文文案内容规则正文文案内容
					规则正文文案内容 正文文案内容规则正文文案内容规则
					正文文案内容规则正文文案内容规则正文
					文案内容规则正文文案内容规则正文文案
					内容规则正文文案内容规则正文文案内容
					规则正文文案内容 正文文案内容规则正文文案内容规则
					正文文案内容规则正文文案内容规则正文
					文案内容规则正文文案内容规则正文文案
					内容规则正文文案内容规则正文文案内容
					规则正文文案内容
				</scroll-view>

				<!-- 关闭按钮 -->
				<uni-icons type="close" size="64rpx" color="#fff" class="close-icon" @click="closeRules"></uni-icons>
			</view>
		</u-popup>

		<!-- 中赏记录 -->
		<u-popup :show="showRest" mode="center" bgColor="transparent" :safeAreaInsetBottom="false" @close="closeRest">
			<view class="rule-popup" data-text="中赏记录">
				<image :src="imageUrl('enjoy-rule-popup.png')" mode="" class="enjoy-rule-popup" />
				<scroll-view scroll-y="true" class="popup-text">
					<!-- 单条中赏记录 -->
					<view class="one-info" data-text="×100发" v-for="item in 8">
						<view class="flex-x">
							<view class="" style="display: flex;">
								<image src="../../static/images/boom/boom-detail/award-doll.png" mode=""
									class="one-info-pic" />
								<text>我是用户名</text>
							</view>
							<text class="class-type" data-text="至尊款">至尊款</text>
						</view>
						<view class="flex-x">
							<text style="font-size: 20rpx;">2022-12-07 13:53:30</text>
							<text class="shop-name">商品名称商品名称商品名称商品名称</text>
						</view>
					</view>
				</scroll-view>

				<!-- 关闭按钮 -->
				<uni-icons type="close" size="64rpx" color="#fff" class="close-icon" @click="closeRest"></uni-icons>
			</view>
		</u-popup>

		<!-- 悬浮按钮 showGoTop showRefresh -->
		<HoverBtns @refresh="refresh" />

	</view>
</template>

<script>
	import HoverBtns from '@/components/common/HoverBtns.vue'
	export default {
		components: {
			HoverBtns
		},
		data() {
			return {
				navWidth: 0,
				navHeight: 0,
				navTop: 0,
				navBottom: 0,

				// 导航栏黑色背景
				navBlackBg: false,
				navOpacity: 1,

				// 是否暂停动画
				isPaused: false,

				checkNav: ['奖品一览', '中赏记录', '抽赏记录'],
				chooseIndex: 0,

				// 购买说明弹出层
				showRules: false,

				// 中赏记录
				showRest: false,
			}
		},
		// 页面滚动
		onPageScroll(e) {
			this.scrollEvent(e.scrollTop)
		},
		methods: { // 页面滚动
			scrollEvent(val) {
				this.navBlackBg = val > 0 ? true : false
				if (val > 0 && val <= 220) {
					const opacity = val / 220
					this.navOpacity = opacity
				}
				if (val === 0) {
					this.navOpacity = 1
				}
			},
			// 暂停音效动画
			pausedAnimation() {
				this.isPaused = !this.isPaused
			},
			changeIndex(index) {
				this.chooseIndex = index
			},
			// 打开购买说明弹出层
			openRules() {
				this.showRules = true
			},
			// 关闭购买说明弹出层
			closeRules() {
				this.showRules = false
			},
			// 中赏记录弹出层
			clickRest() {
				this.showRest = true
			},
			// 关闭中赏记录弹出层
			closeRest() {
				this.showRest = false
			},

			goBack() {
				uni.navigateBack({
					delta: 1,
					success() {

					},
					fail() {
						// 失败 返回首页
						uni.switchTab({
							url: '/pages/tabbar/index/index'
						})
					}
				})
			},
			// 刷新数据
			refresh() {
				console.log('refresh')
			}
		},
		mounted() {
			// #ifdef MP-WEIXIN
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// nav高度
			this.navHeight = menuButtonInfo.height
			// nav顶部距离
			this.navTop = menuButtonInfo.top
			// 导航栏内容宽度
			this.navWidth = menuButtonInfo.left
			// 底部
			this.navBottom = menuButtonInfo.bottom + 4
			// #endif

			// #ifdef H5
			this.navHeight = 44
			this.navTop = 10
			this.navWidth = 300
			this.navBottom = 48
			// #endif

			// #ifdef APP-PLUS
			this.navHeight = 44
			this.navTop = uni.getSystemInfoSync().windowTop
			this.navWidth = 300
			this.navBottom = 48
			// #endif
		}
	}
</script>

<style lang="scss">
	page {
		background: #1C1C1C;
		color: #fff;
	}

	.enjoy-burst {
		position: relative;

		// 导航栏
		.enjoy-lottery-nav {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			// display: flex;
			// justify-content: space-between;
			// align-items: center;
			// padding: 0 24rpx;
			box-sizing: border-box;
			z-index: 99;

			&.black-bg {
				background: #1C1C1C;
			}

			.content {
				position: absolute;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 24rpx;

				.left-back {
					width: 174rpx;
				}

				.title {
					width: 354rpx;
					font-size: 32rpx;
					font-weight: normal;
					line-height: 36rpx;
					text-align: center;

					// 超出显示隐藏
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}
		}

		// 顶部盒子
		.enjoy-lottery-top {
			position: absolute;

			.image {
				width: 100vw;
				height: 100vw;
			}

			// 弹幕平移
			@keyframes barrageMove {
				from {
					top: 210rpx;
				}

				to {
					top: -50rpx;
				}
			}

			// 左侧弹幕
			.left-box {
				position: absolute;
				top: 250rpx;
				left: 30rpx;
				width: 300rpx;
				height: 200rpx;

				font-size: 20rpx;
				font-weight: 500;
				line-height: 24rpx;
				color: #fff;
				overflow: hidden;

				.barrage-item {
					position: absolute;
					top: 210rpx;
					left: 0;
					flex-shrink: 0;
					display: flex;
					align-items: center;
					height: 48rpx;
					padding-right: 20rpx;
					border-radius: 24rpx;
					background: rgba(0, 0, 0, 0.5);
					box-sizing: border-box;
					// 累加延迟时间
					animation: barrageMove linear 6s infinite;

					.barrage-item-pic {
						width: 46rpx;
						height: 46rpx;
						border-radius: 50%;
						border: 4rpx solid #fff;
						margin-right: 8rpx;
					}

					// 赏别
					.barrage-item-type {
						color: #FE2861;

						&.color-red {
							color: #FE2861;
						}

						&.color-orange {
							color: #FF7803;
						}

						&.color-purple {
							color: #7D71F5;
						}

						&.color-blue {
							color: #198EF9;
						}

						&.color-green {
							color: #00B007;
						}
					}

					// 奖品图片
					.barrage-item-award {
						width: 40rpx;
						height: 40rpx;
						border-radius: 4rpx;
						margin-left: 12rpx;
					}
				}
			}

			// 音效旋转
			@keyframes soundEffectRotate {
				from {
					transform: rotate(0);
				}

				to {
					transform: rotate(360deg);
				}
			}

			.right-box {
				position: absolute;
				top: 176rpx;
				right: 0;

				// 音效
				.sound-effect-icon {
					width: 64rpx;
					height: 64rpx;
					margin-left: 90rpx;
					animation: soundEffectRotate linear 4s infinite;

					// 暂停动画
					&.pause {
						position: relative;
						opacity: .5;
						animation-play-state: paused;

						&::after {
							position: absolute;
							top: 50%;
							left: 50%;
							display: block;
							content: '';
							width: 64rpx;
							height: 1rpx;
							background: #999;
							transform: translate(-50%, -50%);
						}
					}
				}

				// 右侧说明
				.right-more {
					position: relative;
					overflow: hidden;

					// 背景图
					.image-bg {
						width: 174rpx;
						height: 60rpx;
						transform: translate(10rpx);
					}

					.content {
						position: absolute;
						top: 14rpx;
						left: 34rpx;
						display: flex;
						font-size: 24rpx;
						font-weight: 600;
						line-height: 34rpx;
						color: #fff;
						transform: rotate(-3deg);
					}
				}
			}
		}

		.enjoy-lottery-bottom {
			position: absolute;
			top: 400rpx;
			width: 100vw;

			// 底部折线
			.line-pic {
				// position: absolute;
				// left: 0;
				// bottom: 128rpx;
				// bottom: 248rpx;
				position: relative;
				width: 100vw;
				height: 112rpx;
				vertical-align: bottom;

				&::after {
					content: attr(data-text);
					position: absolute;
					right: 28rpx;
					bottom: 18rpx;
					font-family: YouSheBiaoTiHei;
					font-size: 60rpx;
					font-weight: normal;
					line-height: 60rpx;
					color: #000;
					text-shadow: 4rpx 4rpx 0 0 rgba(255, 255, 255, 0.2);
				}

				&::before {
					content: attr(data-text);
					position: absolute;
					right: 28rpx;
					bottom: 18rpx;
					font-family: YouSheBiaoTiHei;
					font-size: 60rpx;
					font-weight: normal;
					line-height: 60rpx;
					-webkit-text-stroke: 4rpx #48FFFD;
				}
			}

			// 奖品一览 中赏记录 抽赏记录
			.check-change {
				position: sticky;
				top: 0;
				display: flex;
				padding: 20rpx 30rpx;
				background: #1C1C1C;
				z-index: 99;

				&-nav {
					margin-right: 48rpx;
					font-family: YouSheBiaoTiHei;
					font-size: 48rpx;
					line-height: 48rpx;
					color: rgba(255, 255, 255, .5);

					&.active {
						color: #48FFFD;
						position: relative;
						z-index: 0;

						&::before {
							content: attr(data-text);
							position: absolute;
							left: 0;
							z-index: -1;
							-webkit-text-stroke: 14rpx #fff;
						}

						&::after {
							content: attr(data-text);
							position: absolute;
							left: 0;
							z-index: -1;
							-webkit-text-stroke: 8rpx #1C1C1C;
						}
					}
				}
			}

			// 奖品一览
			.award-list {
				background: #1C1C1C;

				.award-item {
					padding: 20rpx 0 0;

					&-top {
						padding-left: 28rpx;
						font-size: 24rpx;

						.class-type {
							margin-right: 40rpx;
						}
					}

					&-bottom {
						margin-top: 20rpx;

						.one-record {
							width: 184rpx;
							border-radius: 8rpx;
							margin-right: 18rpx;

							&:nth-child(1) {
								margin-left: 28rpx;
							}

							// 商品图片
							.one-record-pic {
								width: 184rpx;
								height: 184rpx;
								vertical-align: bottom;
								box-sizing: border-box;
								border: 2rpx solid transparent;
								border-radius: 8rpx;
								background-clip: padding-box, border-box;
								background-origin: padding-box, border-box;
								background-image: linear-gradient(to right, #000, #000), linear-gradient(180deg, rgba(72, 255, 253, 0.00) 58%, #48FFFD 100%);
							}

							.one-record-tip {
								font-size: 18rpx;
								font-weight: normal;
								line-height: 28rpx;
								color: rgba(255, 255, 255, 0.5);

								.one-record-name {
									font-size: 24rpx;
									color: #fff;

									text-overflow: ellipsis;
									white-space: nowrap;
									overflow: hidden;
								}
							}
						}
					}
				}
			}

			// 中赏记录
			.get-award {
				background: #1C1C1C;

				&-card {
					position: relative;
					width: 690rpx;
					height: 220rpx;
					padding: 16rpx 16rpx 0;
					border-radius: 16rpx;
					background: #393939;
					margin: 0 auto 18rpx;
					font-size: 24rpx;
					box-sizing: border-box;

					.top {
						display: flex;
						border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);

						.pic {
							width: 112rpx;
							height: 112rpx;
							border-radius: 8rpx;
							margin: 0 16rpx 16rpx 0;
						}

						.top-content {
							padding: 14rpx 0;

							.class-type {
								margin-right: 40rpx;
							}
						}

						// 火花
						.burst-fire {
							position: absolute;
							top: 0;
							right: 0;
							width: 144rpx;
							height: 144rpx;
						}
					}

					.bottom {
						display: flex;
						justify-content: space-between;

						>text {
							line-height: 76rpx;
						}

						.open-btn {
							display: flex;
							width: 134rpx;
							height: 46rpx;
							padding: 0 28rpx;
							background: #1C1C1C;
							box-sizing: border-box;
							border: 2rpx solid #48FFFD;
							border-radius: 12rpx 0 12rpx 0;
							margin: auto 0;
							text-align: center;
							line-height: 46rpx;
							box-sizing: border-box;

							// 双箭头
							.down-arrow {
								line-height: 34rpx;
								transform: translateY(2rpx);

								.icon {
									display: block;

									&:nth-child(2) {
										transform: translateY(-26rpx);
									}
								}
							}
						}
					}
				}
			}

			// 抽赏记录
			.get-record {
				background: #1C1C1C;
				padding: 10rpx 30rpx 0;

				.get-record-item {
					display: flex;
					width: 690rpx;
					height: 84rpx;
					padding: 10rpx 16rpx;
					margin-bottom: 10rpx;
					background: #393939;
					border-radius: 8rpx;
					box-sizing: border-box;

					// 用户头像
					.user-pic {
						width: 64rpx;
						height: 64rpx;
						border-radius: 50%;
						margin-right: 14rpx;
					}

					.right {
						width: 580rpx;
						font-size: 18rpx;
						color: #fff;

						.line-box {
							display: flex;
							justify-content: space-between;

							.fontSize24 {
								display: inline-block;
								width: 240rpx;
								font-size: 24rpx;

								text-overflow: ellipsis;
								white-space: nowrap;
								overflow: hidden;
							}
						}
					}
				}
			}
		}

		// 底部狂抽按钮
		.fast-lottery {
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100vw;
			height: 150rpx;
			background: linear-gradient(180deg, rgba(28, 28, 28, 0.2) 0%, #1C1C1C 27%);
			box-sizing: border-box;
			z-index: 99;

			// 预设一个高度
			padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

			.fast-lottery-btn {
				position: relative;
				width: 320rpx;
				height: 128rpx;

				&::after {
					position: absolute;
					top: 50%;
					left: 50%;
					content: attr(data-text);
					font-family: YouSheBiaoTiHei;
					font-size: 56rpx;
					font-weight: normal;
					line-height: 34rpx;
					color: #fff;
					transform: translate(-50%, -50%);
				}

				&::before {
					position: absolute;
					top: 50%;
					left: 50%;
					content: attr(data-text);
					font-family: YouSheBiaoTiHei;
					font-size: 56rpx;
					font-weight: normal;
					line-height: 34rpx;
					-webkit-text-stroke: 8rpx #000;
					transform: translate(-50%, -50%);
				}
			}
		}
	}

	// 奖品类型
	.class-type {
		position: relative;
		display: inline-block;
		width: 100rpx;
		font-family: YouSheBiaoTiHei;

		// 文字
		&::after {
			position: absolute;
			top: 0;
			left: 0;
			content: attr(data-text);
			font-size: 36rpx;
			line-height: 36rpx;
			color: #FE245E;
		}

		// 白色描边
		&::before {
			position: absolute;
			top: 0;
			left: 0;
			content: attr(data-text);
			font-size: 36rpx;
			line-height: 36rpx;
			-webkit-text-stroke: 4rpx #fff;
		}

		// 至尊款
		&.red::after {
			color: #FE245E;
		}

		// 稀有款
		&.orange::after {
			color: #E9871C;
		}

		// 隐藏款
		&.purple::after {
			color: #9932FD;
		}

		// 普通款
		&.blue::after {
			color: #198EF9;
		}
	}

	// 购买说明弹出层
	.rule-popup {
		position: relative;
		width: 580rpx;
		height: 860rpx;

		// 滚动盒子
		.popup-text {
			position: absolute;
			width: 520rpx;
			height: 650rpx;
			padding: 18rpx 14rpx;
			margin: 66rpx 20rpx 60rpx 34rpx;
			font-size: 28rpx;
			line-height: 40rpx;
			color: #fff;
			box-sizing: border-box;

			// 单条中赏记录
			.one-info {
				position: relative;
				width: 520rpx;
				height: 96rpx;
				padding: 12rpx;
				border-radius: 8rpx;
				background: #393939;
				box-sizing: border-box;

				// 空出底部显示距离发数
				margin-bottom: 44rpx;

				&::after {
					position: absolute;
					left: 0;
					bottom: -24rpx;
					content: attr(data-text);
					display: block;
					font-family: YouSheBiaoTiHei;
					width: 100rpx;
					height: 24rpx;
					font-size: 28rpx;
				}

				.flex-x {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					line-height: 24rpx;

					&:nth-child(2) {
						margin-top: 12rpx;
					}

					.one-info-pic {
						position: relative;
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
						vertical-align: middle;
						margin-right: 12rpx;
					}

					.shop-name {
						display: inline-block;
						width: 200rpx;
						margin-right: 18rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}

					.class-type {
						width: 130rpx;
					}
				}
			}
		}

		// 关闭弹出层
		.close-icon {
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
		}

		// 弹出层背景图
		.enjoy-rule-popup {
			position: absolute;
			top: 0;
			display: block;
			width: 580rpx;
			height: 780rpx;
		}

		// 右上角文字提示
		&::after {
			position: absolute;
			right: 20rpx;
			content: attr(data-text);
			font-family: YouSheBiaoTiHei;
			font-size: 36rpx;
			line-height: 48rpx;
			color: #FF7803;
		}
	}
</style>